<template>
  <div>
    <div class="order_box">
      <div class="order_head">
        <span class="iconfont icon-jiantou-left" @click="$router.go(-1)"></span>
        <p>我的订单</p>
      </div>
      <div class="order_address" @click="$router.push('/address')">
        <div class="box" v-if="address">
          <div class="address">
            <div class="user">
              <p>{{ address.home }}</p>
            </div>
            <div class="detailed">
              <p>{{ address.name }}</p>
              <span class="iconfont icon-jiantou-right-copy"></span>
            </div>
            <div class="user">
              <p>{{ address.name }} {{ address.pohone }}</p>
            </div>
          </div>
          <div class="bottom_img">
            <img src="../assets/imgs/地址底部.png" />
          </div>
        </div>
        <div class="box" v-if="!address">
          <div class="address">
            <div class="detailed">
              <p>添加新地址</p>
              <span class="iconfont icon-jiantou-right-copy"></span>
            </div>
          </div>
          <div class="bottom_img">
            <img src="../assets/imgs/地址底部.png" />
          </div>
        </div>
      </div>
      <div class="order_goods">
        <div class="box">
          <div class="head">
            <span class="iconfont icon-tubiaozhizuomoban1"></span>
            <p>
              {{ goodsData.goods_num == 0 ? "闪电直发" : "普通快递"
              }}<span class="span">|</span
              >{{ goodsData.goods_num == 0 ? "约2天到达" : "约6-7天到达" }}
            </p>
          </div>
          <div class="goods">
            <div class="left">
              <img :src="goodsData.goods_img" />
            </div>
            <div class="right">
              <div class="right_top">
                <p class="test">{{ goodsData.goods_test }}</p>
                <p class="price"><span>￥</span>{{ goodsData.goods_price }}</p>
              </div>
              <div class="right_bottom">
                <div>
                  <p>{{ goodsData.goods_code }} 数量 x1</p>
                </div>
                <div class="box">
                  <p>假一赔三</p>
                  <p>防伪包装</p>
                  <p>七天无理由退货</p>
                </div>
              </div>
            </div>
          </div>
          <div class="notice">
            <div class="box">
              <div class="left">
                <p>安心购</p>
              </div>
              <div class="test">
                <p>
                  免费无需补差价，若订单因卖家原因被取消，平台将为您自动匹配新订单;若匹配失败，原单仍将照常赔偿
                </p>
              </div>
              <div class="right">
                <van-checkbox v-model="checked" label-position="left"
                  >免费</van-checkbox
                >
              </div>
            </div>
            <div class="box box_no">
              <div class="left">
                <p>退运服务</p>
              </div>
              <div class="test">
                <p>退货可减免运费</p>
              </div>
              <div class="right">
                免费<span class="iconfont icon-jiantou-right-copy"></span>
              </div>
            </div>
          </div>
          <div class="transport">
            <div class="box">
              <div class="left">
                <p>运费</p>
              </div>
              <div class="test">
                <p>京东快递</p>
              </div>
              <div class="right">
                ￥{{ goodsData.goods_postage
                }}<span class="iconfont icon-jiantou-right-copy"></span>
              </div>
            </div>
            <div class="box">
              <div class="left">
                <p>运费</p>
              </div>
              <div class="test">
                <p></p>
              </div>
              <div class="right">
                无可用代金卷<span
                  class="iconfont icon-jiantou-right-copy"
                ></span>
              </div>
            </div>
            <div class="box">
              <div class="left">
                <p>运费</p>
              </div>
              <div class="test">
                <p></p>
              </div>
              <div class="right">
                无可用代金卷<span
                  class="iconfont icon-jiantou-right-copy"
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="order_buttom">
        <div class="price">
          <p class="test">共1件<span>|</span>合计:</p>
          <p class="total">￥{{ total }}</p>
        </div>
        <div class="suer" @click="suer">
          <p>提交订单</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data: function () {
    return {
      checked: true,
      goodsData: null, //产品数据
      address: null, //地址
    };
  },
  methods: {
    // 提交订单
    suer() {
      // 删除地址状态
      sessionStorage.removeItem("addres");
      let time = new Date(); //提交时候的时间
      let newTime = time.getTime();
      //判断是否有订单了
      let order = sessionStorage.getItem("newTime");
      if (!order) {
        sessionStorage.setItem("cashierPrice", this.total);
        
        //提交订单时间
        let goodsData = JSON.parse(sessionStorage.getItem("commodity"));
        goodsData.goTime = time.toLocaleString();
        sessionStorage.setItem("commodity", JSON.stringify(goodsData));

        // 存储订单id
        sessionStorage.setItem("id", this.goodsData.goods_cid);

        sessionStorage.setItem("newTime", newTime); //存储创建订单时间
        let endTime = newTime + 10 * 60 * 1000;
        sessionStorage.setItem("endTime", endTime); //存储订单结束时间

        this.$router.push("/selectpayment");
      } else {
        Dialog.confirm({
          title: "您还有订单未支付，是否前往支付",
        })
          .then(() => {
            this.$router.push("/completeorder");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
  created() {
    //判断是否登录
    let token = sessionStorage.getItem("token");
    if(!token){
      this.$router.push('login');
    }
    let goodsData = sessionStorage.getItem("commodity");
    this.goodsData = JSON.parse(goodsData); //JSON.parse()将 JSON 字符串转换为对象

    //获取默认地址
    let addresslists = JSON.parse(sessionStorage.getItem("address"));
    let index = sessionStorage.getItem("index");
    this.address = addresslists[index];
  },
  computed: {
    total() {
      let num =
        Number(this.goodsData.goods_price) +
        Number(this.goodsData.goods_postage);
      let i = String(num).indexOf(".");
      if (i == -1) {
        return num + ".00";
      }
      return num;
    },
  },
};
</script>

<style lang="less">
.order_box {
  .order_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
    p {
      display: inline-block;
      padding-left: 33.6%;
    }
  }
  .order_address {
    margin-top: 5px;
    padding: 0 10px;
    .box {
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      .bottom_img {
        position: absolute;
        bottom: 0;
        left: 0;
        img {
          width: 100%;
        }
      }
      .address {
        padding: 15px 10px;
        .detailed {
          padding: 10px 0;
          font-size: 14px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          .iconfont {
            font-size: 12px;
          }
        }
        .user {
          font-size: 12px;
          transform: scale(0.8) translateX(-43px);
          color: #757575;
        }
      }
    }
  }
  .order_goods {
    padding: 0 10px;
    margin-top: 5px;
    .box {
      background-color: #fff;
      .head {
        padding: 10px;
        display: flex;
        align-items: center;
        font-size: 12px;
        .span {
          padding: 0 5px;
        }
        p {
          padding-left: 5px;
        }
      }
      .goods {
        padding: 0 10px 10px;
        display: flex;
        border-bottom: 2px solid #fbfbfb;
        .left {
          width: 70px;
          height: 70px;
          box-sizing: border-box;
          border: 2px solid #fbfbfb;
          border-radius: 3px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .right {
          padding-left: 5px;
          flex: 1;
          .right_top {
            display: flex;
            .test {
              width: 80%;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              font-size: 12px;
            }
            .price {
              font-size: 16px;
              font-weight: bold;
              span {
                display: inline-block;
                font-size: 14px;
              }
            }
          }
          .right_bottom {
            padding: 5px 0;
            font-size: 12px;
            color: #757575;
            .box {
              padding: 5px 0;
              border: 1px solid transparent;
              p {
                margin-right: 5px;
                display: inline-block;
                color: #e07d85;
                background-color: #fdeeec;
                padding: 2px;
              }
            }
          }
        }
      }
      .notice {
        .box {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          padding: 20px 17px 10px;
          border-bottom: 2px solid #fbfbfb;
          .test {
            width: 70%;
            transform: scale(0.9) translateY(-1px);
            color: #757575;
          }
          .right {
            p {
              line-height: 20px;
              padding-right: 5px;
            }
            .iconfont {
              font-size: 12px;
              padding-left: 5px;
              color: #757575;
            }
          }
        }
        .box_no {
          padding: 0 17px 10px;
        }
      }
      .transport {
        .box {
          display: flex;
          justify-content: space-between;
          padding: 10px 17px;
          font-size: 12px;
          .test {
            width: 60%;
            color: #757575;
            transform: scale(0.9) translateX(-1px);
          }
          .iconfont {
            font-size: 12px;
            color: #757575;
            padding-left: 5px;
          }
        }
      }
    }
  }
  .order_buttom {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 15px;
    background-color: #fff;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    .price {
      font-size: 12px;
      display: flex;
      align-items: center;
      .test {
        transform: scale(0.9);
        span {
          padding: 0 5px;
        }
      }
      .total {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }
    }
    .suer {
      width: 100px;
      height: 35px;
      color: #fff;
      background-color: #00cbcc;
      text-align: center;
      line-height: 35px;
    }
  }
}
</style>